<template>
  <el-container>
    <splitpanes class="default-theme">
      <pane size="25" :style="{ height: height + 'px' }">
        <el-container>
          <el-header>
            <el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
          </el-header>
          <el-main style="padding: 0px">
            <el-tree ref="group" class="menu" node-key="id" draggable :data="groupData" :current-node-key="''"
              :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"
              :filter-node-method="groupFilterNode" @node-click="groupClick">
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span style="margin-right: 2px">
                    <el-icon>
                      <component :is="data.icon" />
                    </el-icon>
                  </span>
                  <span>{{ node.label }}</span>
                </span>
              </template>
            </el-tree>
          </el-main>
        </el-container>
      </pane>
      <pane size="75">
        <el-container>
          <el-main style="padding: 0px; overflow: hidden; position: relative">
            <!-- <div class="side-bottom" @click="menuIsCollapse = !menuIsCollapse">
              <el-icon>
                <ArrowLeftBold v-if="menuIsCollapse" />
                <ArrowRightBold v-else />
              </el-icon>
            </div> -->
            <el-skeleton v-if="nodeType == ''" :rows="10" />
            <query-criteria-list v-else-if="nodeType == 'queryCondition'" v-model:formData="form" :fileName="fileName"
              @update="getComponentList" v-model:componentList="dataList" @toDetail="toFieldWidget"
              @toAdd="InitComponent" @delete="getInit"></query-criteria-list>
            <field-widget v-else-if="nodeType == 'component'" v-model:formData="form" :configData="configData"
              :fileName="fileName" @update="getComponent" @init="getInit" :key="componentKey"></field-widget>
            <base-data v-else-if="nodeType == 'report'" v-model:formData="form" :configData="configData"
              @update="getReport" @init="getInit"></base-data>
            <table-data v-else-if="nodeType == 'table'" v-model:formData="form" :fileName="fileName"></table-data>
            <table-fields v-else-if="nodeType == 'tableFields'" v-model:fieldList="dataList" :fileName="fileName"
              :tableId="form.id" @update="getTableFields" @toDetail="getColumn" @addColumn="addColumn"
              @delete="getInit">
            </table-fields>
            <column-field v-else-if="nodeType == 'column'" v-model:formData="form" :configData="configData"
              :fileName="fileName" @update="getColumn" @init="getInit"></column-field>
            <tool-bars v-else-if="nodeType == 'toolbars'" v-model:fieldList="dataList" :fileName="fileName"
              @update="getToolBars" @addButton="addButton" @delete="getInit" @toDetail="getToolbar"></tool-bars>
            <tool-bar v-else-if="nodeType == 'toolbar'" v-model:formData="form" :configData="configData"
              :fileName="fileName" @update="getToolbar" @init="getInit"></tool-bar>
            <dataSets v-else-if="nodeType == 'dataSets'" v-model="dataList" :file-name="fileName" @delete="getInit"
              @addDataSet="InitDataSet" @toDetail="getTable"></dataSets>
          </el-main>
        </el-container>
      </pane>
    </splitpanes>
  </el-container>
</template>

<script setup>
import { ref, onMounted, watch, provide, readonly, computed } from "vue";
import { useRoute } from "vue-router";
import {
  Expand,
  Fold,
  ArrowLeftBold,
  ArrowRightBold,
} from "@element-plus/icons-vue";
import API from "@/api/model/report.js";
import queryCriteriaList from "./components/queryCriteriaList.vue";
import fieldWidget from "./components/fieldWidget.vue";
import baseData from "./components/baseData.vue";
import tableData from "./components/tableData.vue";
import tableFields from "./components/tableFields.vue";
import columnField from "./components/columnField/columnField.vue";
import toolBars from "./components/toolBars.vue";
import toolBar from "./components/toolBar.vue";
import dataSets from "./components/dataSets.vue";
import tool from "./utils/tool";
const route = useRoute();
const groupData = ref([]);
const group = ref(null);
const groupFilterText = ref();
const form = ref({});
const fileName = ref();
const nodeType = ref();
const dataList = ref([]);
const configData = ref([]);
const settingNode = ref();
const menuIsCollapse = ref(true);
const height = computed(() => {
  let h;
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    h = window.innerHeight;
  } else {
    h = screen.height;
  }
  return h - 90
})
provide("fileName", readonly(fileName));
watch(groupFilterText, (val) => {
  group.value.filter(val);
});
onMounted(async () => {
  fileName.value = route.query.fileName;
  await getInit();
  await getReport();
});
const getInit = async () => {
  let res = await API.viewResourceManager.post({
    fileName: route.query.fileName,
  });
  if (res.code == 200) {
    groupData.value = res.dataList;
  }
};
const groupFilterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

const getComponentList = async (val) => {
  nodeType.value = "";
  let res = await API.getComponentList.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    form.value = res.data;
    dataList.value = res.dataList;
    nodeType.value = "queryCondition";
  }
};
const getComponent = async (val) => {
  nodeType.value = "";
  let res = await API.componentDetail.post({
    fileName: route.query.fileName,
    id: val.id ? val.id : val.vmodel,
  });
  if (res.code == 200) {
    configData.value = res.configData;
    form.value = res.dtl;
    if (!res.dtldataset) {
      form.value.dataset = {};
    }
    if (res.dtl.cloneAttributes) {
      form.value.cloneAttributes = tool.convert.mapToArr(
        form.value.cloneAttributes
      );
    }
    nodeType.value = "component";
  }
};
const InitComponent = async () => {
  nodeType.value = "";
  let res = await API.componentAdd.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    configData.value = res.configData;
    form.value = res.dtl;
    if (!form.value.dataset) {
      form.value.dataset = {};
    }
    nodeType.value = "component";
    getInit();
  }
};

const getReport = async (val) => {
  nodeType.value = "report";
  let res = await API.getBaseData.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    form.value = res.data;
    configData.value = res.configData;
  }
};
const getToolBars = async (val) => {
  nodeType.value = "";
  let res = await API.getToolbars.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    dataList.value = res.dataList;
    nodeType.value = "toolbars";
  }
};
const getToolbar = async (val) => {
  console.log(val)
  nodeType.value = "";
  let res = await API.detailToolBar.post({
    name: val.id || val.name,
    fileName: route.query.fileName,
  });
  if (res.code == 200) {
    form.value = res.dtl;
    if (res.dtl.cloneAttributes) {
      form.value.cloneAttributes = tool.convert.mapToArr(
        form.value.cloneAttributes
      );
    }
    configData.value = res.configData;
    nodeType.value = "toolbar";
  }
};
const addButton = async () => {
  let res = await API.addToolBar.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    form.value = res.dtl;
    configData.value = res.configData;
    nodeType.value = "toolbar";
  }
};
const getDataSets = async () => {
  let res = await API.dataSets.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    dataList.value = res.dataList;
    nodeType.value = "dataSets";
  }
};
const InitDataSet = async () => {
  let res = await API.tableAdd.post({ fileName: route.query.fileName });
  if (res.code == 200) {
    form.value = res.dtl;
    configData.value = res.configData;
    if (!res.dtl.dataset) {
      form.value.dataset = {};
    }
    nodeType.value = "table";
  }
};
const getTable = async (val) => {
  nodeType.value = "";
  let res = await API.tableDetail.post({
    fileName: route.query.fileName,
    tableId: val.id,
  });
  if (res.code == 200) {
    form.value = res.data;
    if (!res.data.addRecordTemplate) {
      res.data.addRecordTemplate = [];
    }
    if (res.data.addRecordTemplate) {
      form.value.addRecordTemplate = tool.convert.mapToArr(
        form.value.addRecordTemplate
      );
    }
    if (res.data.page !== null) {
      form.value.page.pageSize = form.value.page.pageSize.toString();
    } else {
      form.value.page = { page: "", pageSize: "" };
    }
    // if (!res.data.dataset) {
    //   form.value.dataset = {};
    // }
    nodeType.value = "table";
  }
};
const getTableFields = async (val) => {
  nodeType.value = "";
  let res = await API.getFieldList.post({
    fileName: route.query.fileName,
    tableId: val.parentId,
  });
  console.log(res);
  if (res.code == 200) {
    dataList.value = res.dataList;
    form.value = res.data;
    nodeType.value = "tableFields";
  }
};
const getColumn = async (val) => {
  console.log(val);
  nodeType.value = "";
  let res = await API.fieldDetail.post({
    fileName: route.query.fileName,
    tableId: val.tableId,
    fieldId: val.id || val.prop,
  });
  if (res.code == 200) {
    if (!res.dtl.template) {
      res.dtl.template = { nodes: [] };
    }
    if (!res.dtl.editItem) {
      res.dtl.editItem = {};
    }
    if (!res.dtl.extendCols) {
      res.dtl.extendCols = {}
    }
    if (res.dtl.cloneAttributes) {
      form.value.cloneAttributes = tool.convert.mapToArr(
        form.value.cloneAttributes
      );
    }
    form.value = res.dtl;
    configData.value = res.configData;
    nodeType.value = "column";
  }
};
const addColumn = async () => {
  let tableId = form.value.tableId;
  let res = await API.addField.post({
    fileName: route.query.fileName,
    tableId: form.value.id,
  });
  if (res.code == 200) {
    if (!res.dtl.template) {
      res.dtl.template = { nodes: [] };
    }
    if (!res.dtl.editItem) {
      res.dtl.editItem = {};
    }
    form.value = res.dtl;
    form.value.tableId = tableId;
    configData.value = res.configData;
    nodeType.value = "column";
  }
};
const strategies = {
  queryCondition: getComponentList,
  component: getComponent,
  report: getReport,
  toolbars: getToolBars,
  toolbar: getToolbar,
  datasets: getDataSets,
  table: getTable,
  tableFields: getTableFields,
  column: getColumn,
};
const groupClick = (data, node) => {
  settingNode.value = data;
  strategies[data.nodeType](data);
};
const toFieldWidget = (val) => {
  getComponent(val);
};
</script>

<style lang="less" scoped>
.side-bottom:hover {
  color: var(--el-color-primary);
}

.side-bottom {
  margin-left: -20px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  position: absolute;
  top: 50%;
  z-index: 9999;
}

.side-bottom i {
  margin-top: 12px;
  margin-left: 8px;
  font-size: 14px;
}
</style>
